<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>二十二部资产管理系统</title>
	<script src="./layui/layui1.js"></script>
	<style type="text/css">
		.viewport canvas, video{
			float: left;
			max-width: 100%;
			width: 100%;
			height: 100vw;
		}
	</style>
</head>
<body class="layui-layout-body">
	<h5>扫码测试2</h5>
	<h5 id="msg"></h5>
	<button id="openScan">点击扫码</button>

	<!-- 悬浮窗 -->
	<div id="scanLayout" style="display: none;">
		<div id="canvanCode" class="viewport">
			<video id="v" autoplay></video>
		</div>
	</div>
	
	<script type="module">
		
		import QrScanner from "./JS/qr-scanner/qr-scanner.min.js";

		var layer,$$;

		layui.use(['layer', 'jquery'],function(){
			layer = layui.layer;
			$$ = layui.$;
		});

		var v = document.getElementById('v');
		var msg = document.getElementById('msg');

		var qrScanner = new QrScanner(
			v, 
			// 扫码完成回调方法
			function(result){
				msg.innerHTML = result.data;
				qrScanner.stop();
				// 悬浮窗提示扫描结果
				layer.msg('decoded qr code:'+ result.data, function(){
					layer.closeAll();
				});
			},{
				highlightScanRegion: true,
				highlightCodeOutline: true
			}
		);

		// 检查摄像头，并设置调用环境摄像头
		QrScanner.hasCamera().then(function(hasCamera){
			qrScanner.setCamera('environment');
		})


		var btn = document.getElementById('openScan');
		btn.addEventListener('click', openScan);

		// 打开扫描窗口
		function openScan(){
			layer.open({
				type: 1,
				title: '扫码框',
				content: $$('#scanLayout'),
				resize: false,
				move: false,
				area: '100%',
				offset: '10%',
				shade: 0.3,
				success: function(layero, index){
					// 开始扫码
					qrScanner.start();
				},
				end: function(layero, index){
					// 结束扫码
					qrScanner.stop();
				}
			});
		}

	</script>
</body>
</html>